<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content="HTML Tidy for Java (vers. 2009-12-01), see jtidy.sourceforge.net" />
    <title>Behaviors</title>
    <meta name="order" content="2" />
    <meta name="toc" content="true" />
    <meta name="toc-max" content="2" />
  </head>
  <body dir="ltr">
    <h1>Behavior Reference</h1>    
    <p>
	To help Stencil developers define how the content in shapes can be changed to be reflect shape's properties,
    Pencil provides the Behavior concept.
      With behaviors, attributes or content of the target object can be changed based on Behavior's input values. The target object can be an
      SVG object or an HTML object in the <code>&lt;Content&gt;</code> section of the shape.
	  </p>
    <p>This document lists all supported behaviors in Pencil, each with XML syntax and examples.</p>
    <p>Behaviors applied to an object within the shape are defined as below:</p>
    <div style="width: 60%;">
    <pre name="code" class="xml">
    &lt;For ref="target_object_id"&gt;
      &lt;Behavior_1&gt;....&lt;/Behavior_1&gt;
      &lt;Behavior_2&gt;....&lt;/Behavior_2&gt;
      .......
      &lt;Behavior_n&gt;....&lt;/Behavior_n&gt;
    &lt;/For&gt;</pre>
    <p>For the ease of understanding the examples used in this document, let's assume that we have a <code>box</code>
    property of type <code><a href="Data_Types.html#dimension">Dimension</a></code> defined for the shape:</p>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Property name="box"
              type="Dimension"&gt;150,150&lt;/Property&gt;
    </pre>
    </div>
	<hr/>
	
	
    <h2>CustomStyle</h2>
    <p>
	This behavior is used to assign value to a specific CSS attribute of the target object. Value and name
    are specified in the input arguments of the behavior.
	</p>
    <h3>Target object:</h3>
    <p>All kind of objects.</p>
    <h3>XML Syntax:</h3>
	<pre name="code" class="xml">
  &lt;CustomStyle&gt;
    &lt;Arg&gt;propertyName&lt;/Arg&gt;
    &lt;Arg&gt;value&lt;/Arg&gt;
  &lt;/CustomStyle&gt;</pre>
    <h3>Input value:</h3>
    <p>propertyName: name of property.</p>
    <p>value: value is assigned to propertyName.</p>
    <h3>Result:</h3>
    <p>The the CSS property "propertyName" of the target object is assigned with the provided value.</p>
    <h3>Example:</h3>
	<pre name="code" class="xml">
    &lt;CustomStyle&gt;
      &lt;Arg&gt;"width"&lt;/Arg&gt;
      &lt;Arg&gt;$box.w + "px"&lt;/Arg&gt;
    &lt;/CustomStyle&gt;</pre>
    <hr/>
	
	
    <h2>Attr</h2>
    <p>
      This behavior is used to assign value to a specific XML attribute of the target object. Value and name (and
      optional namespace URI) are specified in the input arguments of the behavior.
    </p>
    <h3>Target object:</h3>
    <p>All kind of objects.</p>
    <h3>XML Syntax:</h3>
	<pre name="code" class="xml">
    &lt;Attr&gt;
      &lt;Arg&gt;attributeName&lt;/Arg&gt;
      &lt;Arg&gt;value&lt;/Arg&gt;
      &lt;Arg&gt;namespace&lt;/Arg&gt;
    &lt;/Attr&gt;</pre>
    <h3>Input value:</h3>
    <p>attributeName: name of attribute.</p>
    <p>value: value is assigned to propertyName.</p>
    <p>namespace: namespace URI that this attribute is in. If the attribute has no namespace, the namespace argument can be omitted.</p>
    <h3>Result:</h3>
    <p>The "attributeName" attribute of the target object is assigned with the provided value.</p>
    <h3>Example:</b>
    <pre name="code" class="xml">
    &lt;Attr&gt;
      &lt;Arg&gt;"width"&lt;/Arg&gt;
      &lt;Arg&gt;$box.w&lt;/Arg&gt;
    &lt;/Attr&gt;</pre>
    <pre name="code" class="xml">
    &lt;Attr&gt;
      &lt;Arg&gt;"xlink:href"&lt;/Arg&gt;
      &lt;Arg&gt;value&lt;/Arg&gt;
      &lt;Arg&gt;PencilNamespaces.xlink&lt;/Arg&gt;
    &lt;/Attr&gt;</pre>
    <p>If the namespace was defined in parent node, namespace argument could also be omited.</p>
    <pre name="code" class="xml">
    &lt;Attr&gt;
      &lt;Arg&gt;"xlink:href"&lt;/Arg&gt;
      &lt;Arg&gt;value&lt;/Arg&gt;
    &lt;/Attr&gt;</pre>
    <hr/>
    
    
    <h2>Box</h2>
    <p>This behavior is used to assign value to width and height attributes of the target object.</p>
    <h3>Target object:</h3>
    <p>All objects have width and height attributes.</p>
    <h3>XML syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Box&gt;dimensionValue&lt;/Box&gt;</pre>
    <h3>Input value:</h3>
    <p>dimensionValue: an expression that returns the value of type <code><a href="Data_Types.html#dimension">Dimension</a></code>.</p>
    <h3>Result:</h3>
    <p>The width and height attributes of the target object is set to the dimensionValue object.</p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Box&gt;$box&lt;/Box&gt;</pre>    
    <p>Or directly:</p>
    <pre name="code" class="xml:nocontrols:nogutter" >
      &lt;Box&gt;new Dimension(50,50)&lt;/Box&gt;</pre> 
    <hr/>
    <h2>Bound</h2>
    <p>This behavior is used to assign value to width and height atributes and set position of the target object.</p>
    <h3>Target object:</h3>
    <p>All objects have width and height properties.</p>
    <h3>XML syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
      &lt;Bound&gt;bound&lt;/Bound&gt;</pre>
    <h3>Input value:</h3>
    <p>bound: an object of type <code><a href="Data_Types.html#bound">Bound</a></code></p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
      a) &lt;Bound&gt;new Bound(x, y, width, height)&lt;/Bound&gt;</pre>
      <blockquote>
        <h4>Input value &amp; Result:</h4>
        <img src="images/Behaviors_html_3c35ed33.png" name="graphics1" width="207" height="168" border="0" />
      </blockquote>
    <pre name="code" class="xml:nocontrols:nogutter" >
      b) &lt;Bound&gt;Bound.fromBox(Box, paddingX, paddingY)&lt;/Bound&gt;</pre>
      <blockquote>
        <h4>Input value &amp; Result:</h4>
        <img src="images/Behaviors_html_m1f1bf638.png" name="graphics3" width="190" height="130" border="0" />
      </blockquote>
    <pre name="code" class="xml:nocontrols:nogutter" >
      c) &lt;Bound&gt;Bound.fromBox(new Dimension(width, height), paddingX, paddingY)&lt;/Bound&gt;</pre>
      <blockquote>
        <h4>Input value &amp; Result:</h4>
        <img src="images/Behaviors_html_m42afb0a2.png" name="graphics2" width="207" height="168" border="0" />
      </blockquote>


      <hr/>
      
      
    <h2>Radius</h2>
    <p>This behavior sets the "rx" and "ry" attribute of the SVG objects that support corner radius including
      Rectangle and Ellipse.</p>
    <h3>Target object:</h3>
    <p>rectangle and ellipse</p>
    <h3>XML syntax:</h3>
    <pre name="code" class="xml" >
    &lt;Radius&gt;
      &lt;Arg&gt;rx&lt;/Arg&gt;
      &lt;Arg&gt;ry&lt;/Arg&gt;
    &lt;/Radius&gt;</pre>
    <h3>Input value:</h3>
    <p>rx: number - horizontal radius</p>
    <p>ry: number - vertical radius</p>
    <h3>Result:</h3>
    <p>The target object (Rectangle, Ellipse) is set "rx" and "ry".</p>
    <h3>Example:</h3>
    <pre name="code" class="xml" >
    &lt;Radius&gt;
      &lt;Arg&gt;5&lt;/Arg&gt;
      &lt;Arg&gt;5&lt;/Arg&gt;
    &lt;/Radius&gt;</pre>
    <hr/>
    
    
    <h2>Fill</h2>
    <p>This behavior sets the "fill" and "fill-opacity" attribute of the target SVG objects that can be
      filled with color.</p>
    <h3>Target object:</h3>
    <p>SVG objects that can be filled with color.</p>
    <h3>XML syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Fill&gt;color&lt;/Fill&gt;</pre>
    <h3>Input value:</h3>
    <p>color: an object of type <code><a href="Data_Types.html#color">Color</a></code>.</p>
    <h3>Result:</h3>
    <p>The target object color and opacity are set.</p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Fill&gt;Color.fromString("#ffffffff")&lt;/Fill&gt;</pre>
    <p>Or:</p>
    <pre name="code" class="xml:nocontrols:nogutter" >
      &lt;Property name="color" displayName="fColor" type="Color"&gt;#000000ff&lt;/Property&gt;     
      ....
      &lt;Fill&gt;$color&lt;/Fill&gt;</pre>    
      <hr/>
      
      
    <h2>Color</h2>
    <p>This behavior sets the "color" and "opacity" attribute of the target HTML object.</p>
    <h3>Target object:</h3>
    <p>HTML objects.</p>
    <h3>XML syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Color&gt;color&lt;/Color&gt;</pre>  
    <h3>Input value:</h3>
    <p>color: an object of type <code><a href="Data_Types.html#color">Color</a></code>.</p>
    <h3>Result:</h3>
    <p>The target object color and opacity are set.</p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Color&gt;Color.fromString("#ffffffff")&lt;/Color&gt;</pre>
    <p>Or:</p>
    <pre name="code" class="xml:nocontrols:nogutter" >
      &lt;Property name="color" displayName="fColor" type="Color"&gt;#000000ff&lt;/Property&gt;
      ....
      &lt;Color&gt;$color&lt;/Color&gt;
    </pre>
    <hr/>
    
    
    <h2>StrokeColor</h2>
    <p>This behavior sets the "stroke" and "stroke-opacity" attribute of the SVG target objects that have stroke.</p>
    <h3>Target object:</h3>
    <p>Objects that can be stroked.</p>
    <h3>XML syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;StrokeColor&gt;color&lt;/StrokeColor&gt;</pre> 
    <h3>Input value:</h3>
    <p>color: an object of type <code><a href="Data_Types.html#color">Color</a></code>.</p>
    <h3>Result:</h3>
    <p>The target object stroke color and stroke opacity are set.</p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;StrokeColor&gt;Color.fromString("#ffffffff")&lt;/StrokeColor&gt;</pre>
    <p>Or:</p>
    <pre name="code" class="xml:nocontrols:nogutter" >
      &lt;Property name="color" displayName="fColor" type="Color"&gt;#000000ff&lt;/Property&gt;
      ...
      &lt;StrokeColor&gt;$color&lt;/StrokeColor&gt;</pre> 
    <hr/>

    
    <h2>StrokeStyle</h2>
    <p>This behavior is used to set "stroke-width" and "stroke-dasharray" attribute of the target object</p>
    <h3>Target object:</h3>
    <p>Objects that have stroke.</p>
    <h3>XML syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;StrokeStyle&gt;strokeStyle&lt;/StrokeStyle&gt;</pre> 
    <h3>Input value:</h3>
    <p>strokeStyle: an object of type <code><a href="Data_Types.html#strokestyle">StrokeStyle</a></code>.</p>
    <h3>Result:</h3>
    <p>The stroke of the target object is assigned value</p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;StrokeStyle&gt;StrokeStyle.fromString("1|[1,3]")&lt;/StrokeStyle&gt;</pre>
    <p>Or:</p>
    <pre name="code" class="xml" >
    &lt;Property name="strokeStyle"
              type="StrokeStyle" displayName="Border Style"&gt;1|[2,1,2,4]&lt;/Property&gt;
    ...
    &lt;StrokeStyle&gt;$strokeStyle&lt;/StrokeStyle&gt;
    </pre> 
    <hr/>
    
    
    <h2>Visibility</h2>
    <p>This behavior is used to assign value to "visibility" and "display" attribute of the target object</p>
    <h3>Target object:</h3>
    <p>All kind of objects.</p>
    <h3>XML Syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Visibility&gt;value&lt;/Visibility&gt;</pre>  
    <h3>Input value:</h3>
    <p>value: either Pencil's <code><a href="Data_Types.html#bool">Bool</a></code> data object or a JavaScript boolean value.</p>
    <h3>Result:</h3>
    <p>"visibility" and "display" attribute of target object is changed according to input value.</p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Visibility&gt;Bool.fromString("true")&lt;/Visibility&gt;</pre>
    <p>Or:</p>
    <pre name="code" class="xml">
      &lt;Property name="value" displayName="Value" type="Bool"&gt;true&lt;/Property&gt;
      ...
      &lt;Visibility&gt;$value&lt;/Visibility&gt;</pre>
    <hr/>
    
    
    <h2>BoxFit</h2>
    <p>This behavior is used to set text bound and alignment.</p>
    <h3>Target object:</h3>
    <p>Only text object.</p>
    <h3>XML syntax:</h3>
    <pre name="code" class="xml">
    &lt;BoxFit&gt;
      &lt;Arg&gt;bound&lt;/Arg&gt;
      &lt;Arg&gt;alignment&lt;/Arg&gt;
    &lt;/BoxFit&gt;</pre>
    <h3>Input value:</h3>
    <p>bound: an object of type <code><a href="Data_Types.html#bound">Bound</a></code></p>
    <p>alignment: an object of type <code><a href="Data_Types.html#alignment">Alignment</a></code>.</p>
    <h3>Result:</h3>
    <p>Text content of the elment are changed to fit the provided bound and in the provided alignment.</p>
    <h3>Example:</h3>
    <pre name="code" class="xml">
    &lt;BoxFit&gt;
      &lt;Arg&gt;Bound.fromBox($box)&lt;/Arg&gt;
      &lt;Arg&gt;new Alignment(1,1)&lt;/Arg&gt;
    &lt;/BoxFit&gt;</pre>    
    <pre name="code" class="xml">
    &lt;Property name="textAlign"
              displayName="Text Alignment" type="Alignment"&gt;1,1&lt;/Property&gt;
    ...
    &lt;BoxFit&gt;
      &lt;Arg&gt;Bound.fromBox($box)&lt;/Arg&gt;
      &lt;Arg&gt;$textAlign&lt;/Arg&gt;
    &lt;/BoxFit&gt;</pre>
    <hr/>
    
    
    <h2>Font</h2>
    <p>This behavior is used to set the target object text font. With this behavior, a set of font-related attributes are changed.</p>
    <h3>Target object:</h3>
    <p>SVG Text object and HTML objects.</p>
    <h3>XML Syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Font&gt;font&lt;/Font&gt;</pre>
    <h3>Input value:</h3>
    <p>font: an object of type <code><a href="Data_Types.html#font">Font</a></code>.</p>
    <h3>Result:</h3>
    <p>"font-family", "font-size", "font-weight", "font-style" and "text-decoration" attribute of text object are
      assigned value.</p>
    <p>Note that "text-decoration" attribute is only supported for HTML objects. So it is impossible to set
      "text-decoration" to SVG Text object.</p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Font&gt;Font.fromString("Helvetica|normal|normal|14px")&lt;/Font&gt;</pre>
    <pre name="code" class="xml" >
    &lt;Property name="font" type="Font" displayName="Default Font"&gt;Helvetica|normal|normal|14px&lt;/Property&gt;
    ...
    &lt;Font&gt;$font&lt;/Font&gt;</pre>
    <hr/>
    
    
    <h2>D</h2>
    <p>This behavior is used to set "d" attribute of an SVG path object. The
      values are put into D behavior will be listed in the input value.</p>
    <h3>Target object:</h3>
    <p>Only path object.</p>
    <h3>XML Syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;D&gt;[...]&lt;/D&gt;</pre>
    <h3>Input value:</h3>
    <p>[...] : an array of drawing instruction functions. Pencil supports drawing functions that are equivalent to
    popular SVG path data instructions:</p>    
    <p>M(x,y) : set point.</p>
    <p>L(x,y) : draw a line from a point to x,y.</p>
      <pre name="code" class="xml:nocontrols:nogutter" >
      Ex: &lt;D&gt;[M(0, 0), L(10,10)]&lt;/D&gt;</pre>
    <p>C(x1, y1, x2, y2, x, y): the same as C in SVG.</p>
    <p>c(x1, y1, x2, y2, x, y): the same as c in SVG.</p>
    <p>S(x2, y2, x, y): the same as S in SVG.</p>
    <p>s(x2, y2, x, y): the same as s in SVG.</p>
    <p>Q(x1, y1, x, y): the same as Q in SVG.</p>
    <p>q(x1, y1, x, y): the same as q in SVG.</p>
    <p>z: the same as z in SVG.</p>
    <p>And two Pencil-specific instructions for drawing sketchy lines:</p>
    <p>sk(x1, y1, x2, y2): move to x1, y1 and draw a sketchy line to x2, y2</p>
    <p>skTo(x, y): draw a sketchy line from the current position to x, y</p>
    <h3>Result:</h3>
    <p>"d" attribute of the path object is assigned value each function is converted to correstpodent SVG drawing operation.
    Pencil-specificc instructions are converted to also standard SVG drawing operations but in a special algorithm
    to make the line sketchy.</p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
      &lt;D&gt;[M(0, 0), L($box.w, 0), L($box.w, $box.h), L(0, $box.h), z]&lt;/D&gt;</pre>
    <hr/>
    
    
    <h2>Transform</h2>
    <p>This behavior is used to control the "transform" attribute of SVG target
      objects. The provided array of transformation functions is converted to SVG transformation functions.</p>
    <h3>Target object:</h3>
    <p>All SVG objects.</p>
    <h3>XML Syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Transform&gt;[...]&lt;/Transform&gt;</pre>
    <h3>Input value:</h3>
    <p>[...] : an array of instruction functions. The functions are similar to
      the SVG transformation functions:</p>
    <br/>
    <p>rotate(x)</p>
    <p>translate(x, y)</p>
    <p>scale(x, y)</p>
    <p>skewX(a)</p>
    <p>skewY(a)</p>
    <h3>Result:</h3>
    <p>"transform" attribute of the SVG target object is assigned value.</p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
      &lt;Transform&gt;[scale($box.w.120, $box.h/100), transform(50, 70)]&lt;/Transform&gt;</pre>    
    <hr/>  
      
    <h2>Scale</h2>
    <p>This behavior is used to assigned to "scale" function of "transform"
      attribute of SVG object. This behavior is equivalent to a <code>Transform</code> with just one <code>scale()</code></p>
    <h3>Target object:</h3>
    <p>All SVG objects.</p>
    <h3>XML Syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
      &lt;Scale&gt;width_ratio, height_ratio&lt;/Scale&gt;</pre> 
    <h3>Input value:</h3>
    <p>width_ratio: number - the horizontal scale ratio</p>
    <p>height_ratio: number - the vertical scale ratio</p>
    <h3>Result:</h3>
    <p>The SVG object width and height will be changed based on the ratio.
      Note that using this behavior will empty the current value of the <code>transform</code> attribute.</p>
    <h3>Example</h3>
    <pre name="code" class="xml" >
    &lt;Scale&gt;
      &lt;Arg&gt;$box.w/120&lt;/Arg&gt;
      &lt;Arg&gt;$box.h/100&lt;/Arg&gt;
    &lt;/Scale&gt;</pre>
    <hr/>
    
    
    <h2>TextContent</h2>
    <p>This behavior is used to control the content of the target text object.</p>
    <p>
    <em>Note:</em> this behavior does not support text wrapping for PlainText content in SVG elements.
    To have the PlainText content wrapped
    in side an SVG <code>text</code> element in a specific aligmnent, please use the
    <code><a href="#plaintextcontent">PlainTextContent</a></code> behavior.</p>
    <h3>Target object:</h3>
    <p>SVG <code>text</code> object and HTML objects.</p>
    <h3>XML Syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;TextContent&gt;text&lt;/TextContent&gt;</pre> 
    <h3>Input value:</h3>
    <p>text: a <code><a href="Data_Types.html#plaintext">PlainText</a></code> or <code><a href="Data_Types.html#richtext">RichText</a></code> value.</p>
    <h3>Result:</h3>
    <p>The target object text content is changed.</p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
      &lt;TextContent&gt;new PlainText("text here...")&lt;/TextContent&gt;</pre>    
    <pre name="code" class="xml" >
    &lt;Property name="content"
              displayName="HTML Content" type="RichText"&gt;text here...&lt;/Property&gt;
    ....
    &lt;TextContent&gt;$label&lt;/TextContent&gt;</pre> 
    <hr/>
    
    <h2>PlainTextContent</h2>
    <p>This behavior is used to control the wrapped text inside an SVG <code>text</code> element. This is the
    recommended way to implement wrapped plain-text content instead of using HTML wrapping. This behavior produces
    compliant SVG output and the resulted drawing can be used in other SVG editors like Inkscape.</p>
    <h3>Target object:</h3>
    <p>SVG <code>text</code> elements.</p>
    <h3>XML Syntax:</h3>
<pre name="code" class="xml:nocontrols:nogutter"><![CDATA[
<PlainTextContent>
  <Arg>plainTextValue</Arg>
  <Arg>bound</Arg>
  <Arg>alignment</Arg>
</PlainTextContent>
]]></pre> 
    <h3>Input value:</h3>
    <p>text: an object of type <code><a href="Data_Types.html#plaintext">PlainText</a></code>.</p>
    <p>bound: an object of type <code><a href="Data_Types.html#bound">Bound</a></code></p>
    <p>alignment: an object of type <code><a href="Data_Types.html#alignment">Alignment</a></code></p>
    <h3>Result:</h3>
    <p>Content of the <code>text</code> target object will be filled with <code>&lt;tspan&gt;</code>
    elements to create wrapped text content. <code>transform</code> attribute of this element may be used in for
    controlling the bounding.</p>
    <h3>Example:</h3>
<pre name="code" class="xml"><![CDATA[
<Property name="content"
          displayName="Text Content" type="PlainText">text here...</Property>

...

<PlainTextContent>
  <Arg>$content</Arg>
  <Arg>Bound.fromBox($box, 10)</Arg>
  <Arg>new Alignment(1, 1)</Arg>
</PlainTextContent>
]]></pre>     
    <hr/>    
    <h2>DomContent</h2>
    <p>This behavior populate child DOM nodes into the target object.</p>
    <h3>Target object:</h3>
    <p>All objects</p>
    <h3>XML Syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;DomContent&gt;domContent&lt;/DomContent&gt;</pre> 
    <h3>Input value:</h3>
    <ul>
        <li>
            <strong>domContent</strong>: a DOM element of a DOM fragment.
            <p>
                Please refer the associated tutorial on <a href="~/wiki/devguide/Tutorial/DomContent.html">Dynamic DOM Content</a> for
                more information. 
            </p>
        </li>
    </ul>
    <hr/>
    
    
    <h2>Image</h2>
    <p>This behavior is used to control the <code>xlink:href</code>, <code>width</code> and <code>height</code>
    attribute of an SVG <code>&lt;image&gt;</code> element.</p>
    <h3>XML Syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Image&gt;imageData&lt;/Image&gt;</pre> 
    <h3>Input value:</h3>
    <p>imageData: an object of type <code><a href="Data_Types.html#imagedata">ImageData</a></code></p>
    <h3>Result:</h3>
    <p><code>xlink:href</code>, <code>width</code> and <code>height</code> attributes of the target <code>&lt;image&gt;</code> element
    are changed to be in sync with the provided <code>imageData</code> input value.</p>
    <h3>Example:</h3>
<pre name="code" class="xml">
&lt;Property name="icon"
          displayName="Icon"
          type="ImageData"&gt;&lt;![CDATA[10,15,...]]&gt;&lt;/Property&gt;

...

&lt;Image&gt;$icon&lt;/Image&gt;</pre>
    <hr/>
    
    <h2>EllipseFit</h2>
    <p>This behavior is used control an <code>ellipse</code> element so that it fits into the provided bound.</p>
    <h3>Target object:</h3>
    <p>SVG <code>ellipse</code> elements.</p>
    <h3>XML Syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;EllipseFit&gt;box&lt;/EllipseFit&gt;</pre> 
    <h3>Input value:</h3>
    <p>box: an object of type <code><a href="Data_Types.html#dimension">Dimension</a></code>.</p>
    <h3>Result:</h3>
    <p>The "cx", "cy", "rx", "ry" attribute values are changed.</p>    
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;EllipseFit&gt;$box&lt;/EllipseFit&gt;</pre> 
    <img src="images/Behaviors_html_m11bb32c0.png" name="graphics4" width="174" height="120" border="0" />
    <hr/>
    
    
    <h2>Width</h2>
    <p>This behavior is used to assign "width" attribute of the target object.</p>
    <h3>Target object:</h3>
    <p>All SVG objects that have "width" attribute</p>
    <h3>XML Syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Width&gt;width&lt;/Width&gt;</pre> 
    <h3>Input value:</h3>
    <p>width: a number</p>
    <h3>Result:</h3>
    <p>"width" attribute of the target object is assigned value.</p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Width&gt;$box.w&lt;/Width&gt;</pre>
    <hr/>
    
    
    <h2>Height</h2>
    <p>This behavior is used to assign "height" attribute of the target object.</p>
    <h3>Target object:</h3>
    <p>All SVG objects that have "height" attribute</p>
    <h3>XML Syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Height&gt;height&lt;/Height&gt;</pre>
    <h3>Input value:</h3>
    <p>height: a number</p>
    <h3>Result:</h3>
    <p>The "height" attribute of the target object is assigned value.</p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;Height&gt;$box.h&lt;/Height&gt;</pre>
    <hr/>
    
    
    <h2>NPatchDomContent<h2>
    <p>This behavior is used to fill the target <code>&lt;g&gt;</code> SVG element with <code>&lt;image&gt;</code>
    elements provided in the Nine-Patch with correct scaling to the provided dimension.</p>
    <h3>Target object:</h3>
    <p>SVG <code>&lt;g&gt;</code> elements.</p>
    <h3>XML Syntax:</h3>
<pre name="code" class="xml"><![CDATA[
<NPatchDomContent>
  <Arg>ninePatch</Arg>
  <Arg>dimension</Arg>
</NPatchDomContent>
]]></pre>    
    <h3>Input value:</h3>
    <ul>
        <li><strong>ninePatch</strong>: a Nine-Patch data structure.</li>
        <li><strong>dimension</strong>: an object of type <code><a href="Data_Types.html#dimension">Dimension</a></code>.</li>
    </ul>
    <h3>Result:</h3>
    <p>The Nine-Patch data structure is used together with the dimension to calculate scaling for patches and <code>&lt;image&gt;</code>
    elements are generated and filled into the target <code>&lt;g&gt;</code> element.</p>
    <h3>Example:</h3>
    <p>For more information on how to use this behavior, please refer the associated tutorial on
    <a href="~/wiki/devguide/Tutorial/Nine_Patches.html">Using Nine-Patch</a>.</p>
    <hr/>
    
    
    <h2>InnerText</h2>
    <p>This behavior is used to fill the content of the target object with a DOM text node.</p>
    <h3>Target object:</h3>
    <p>All objects</p>
    <h3>XML Syntax:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
    &lt;InnerText&gt;value&lt;/InnerText&gt;</pre>
    <h3>Input value:</h3>
    <p>value: a string.</p>
    <h3>Result:</h3>
    <p>A new DOM text node is generated with provided value and filled into the target object.</p>
    <h3>Example:</h3>
    <pre name="code" class="xml:nocontrols:nogutter" >
      &lt;InnerText&gt;"put content here..."&lt;/InnerText&gt;</pre>
  </body>
</html>
